<template>
  <div class="app-container">
    <FilterSearch :value="queryParams" :config="configData" layout="inline"></FilterSearch>
    <main>
      <div class="row-a1" v-show="echartsStatus.status1">
        <div class="echarts-list">
          <div class="echarts-li" id="chart1">

          </div>
          <div class="echarts-li" id="chart2">

          </div>
          <div class="echarts-li" id="chart3">

          </div>
          <div class="echarts-li" id="chart4">

          </div>
        </div>
      </div>
      <div class="table" v-show="echartsStatus.status1">
        <a-table :scroll="{ x: 1500 }" :dataSource="tableData.dataSource" :columns="tableData.columns" :pagination="false"
          :loading="tableData.loading">
          <template #bodyCell="{ column, index, record }">
            <template v-if="column.key === 'state'">
              <template v-for="item in typeOptions.options2">
                <span v-if="record.state == item.codeValue" color="#f50">{{ item.codeName }}</span>
              </template>
            </template>
            <template v-if="column.key === 'index'">
              <span>
                {{ (index + 1) }}
              </span>
            </template>
          </template>
        </a-table>
      </div>
      <div class="page" v-show="echartsStatus.status1">
        <a-pagination v-model:current="queryParams.pageNumber" :show-total="total => ` 总条数:${total}条`" v-model:pageSize="queryParams.pageSize"
          :total="tableData.total" @change="currentChange" />
      </div>
    </main>
  </div>
</template>

<script lang='ts' setup>
import { ref, computed, onMounted, reactive } from 'vue';
import * as echarts from 'echarts';
import { getQueryAll } from "@/api/common";
import { getList } from "@/api/retailSheet";
import { MATERIAL } from '@/utils/config';
import { message } from 'ant-design-vue';

type EChartsOption = echarts.EChartsOption;

const queryParams = ref({
  pageNumber: 1,
  pageSize: 10,
  startTimeAndEndTime: [],
  startTime: "",
  endTime: "",
  codeValue: null
});
const echartsStatus = reactive({
  status1: false
})
const typeOptions = reactive({
  options1: [],
  options2: []
})
const tableData = reactive({
  dataSource: [],
  columns: [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 80,
      align: 'center'
    },
    {
      title: '合同号',
      dataIndex: 'contractNum',
      key: 'contractNum',
    },
    {
      title: '承租人姓名',
      dataIndex: 'lesseeName',
      key: 'lesseeName'
    },
    {
      title: '入库时间',
      dataIndex: 'warehouseTime',
      key: 'warehouseTime'
    },
    {
      title: '出库时间',
      dataIndex: 'outboundTime',
      key: 'outboundTime'
    },
    {
      title: '档案存储地',
      dataIndex: 'fileLocation',
      key: 'fileLocation'
    },
    {
      title: '档案状态',
      dataIndex: 'state',
      key: 'state'
    }
  ],
  total: 0,
  echartsList: [],
  loading: false
});

const configData = computed(() => {
  let config = {
    itemConfig: [
      {
        type: "select",
        prop: "codeValue",
        label: "分类",
        placeholder: "请选择",
        func: setEchartsConfig,
        optList: typeOptions.options1
      },
      {
        type: "dateRange",
        prop: "startTimeAndEndTime",
        allowClear: "关闭",
        label: "时间",
        placeholder: ["请选择", "请选择"],
        valueFormat: "YYYY-MM-DD",
        format: 'YYYY-MM'
      }
    ],
    operate: [
      {
        icon: "",
        type: "primary",
        name: "查询",
        handleClick: getLoad,
        rule: true,
      },
      {
        icon: "",
        type: "primary",
        name: "重置",
        handleClick: reset,
        rule: true,
      }],
    rules: {

    },
  };
  return config;
});
function setEchartsList() {
  let len = tableData.echartsList.length;
  if (len >= 1) setEcharts1();
  if (len >= 2) setEcharts2();
  if (len >= 3) setEcharts3();
  if (len >= 4) setEcharts4();
}
function setEcharts1() {
  let chartDom = document.getElementById('chart1');
  echarts.dispose(chartDom);
  let myChart = echarts.init(chartDom);
  let option: EChartsOption;
  option = {
    color: ['#4336b5', '#dbdbdb'],
    title: {
      text: '数量:' + tableData.echartsList[0]['total'],
      subtext: tableData.echartsList[0].codeName,
      top: '0%',
      left: '5%'
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params: any) {
        if (params.data.name) {
          return `${params.data.name}${params.data.value}%`;
        } else {
          return;
        }
      }
    },
    legend: {
      top: '0%',
      right: 'right'
    },
    series: [
      {
        type: 'pie',
        radius: ['25%', '50%'],
        label: {
          show: true,
          formatter(params: any) {
            if (params.data.name) {
              return `${params.data.name}${params.data.value}%`;
            } else {
              return;
            }
          }
        },
        labelLine: {
          show: true
        },
        data: [
          { value: parseInt(tableData.echartsList[0]['percent']), name: '占比' },
          { value: (100 - parseInt(tableData.echartsList[0]['percent'])), name: '未占比' },
        ]
      }
    ]
  };
  myChart.setOption(option);
}
function setEcharts2() {
  var chartDom = document.getElementById('chart2');
  echarts.dispose(chartDom);
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  option = {
    color: ['#fc0808', '#dbdbdb'],
    title: {
      text: '数量:' + tableData.echartsList[1]['total'],
      subtext: tableData.echartsList[1].codeName,
      top: '0%',
      left: '5%'
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params: any) {
        if (params.data.name) {
          return `${params.data.name}${params.data.value}%`;
        } else {
          return;
        }
      }
    },
    legend: {
      top: '0%',
      right: 'right'
    },
    series: [
      {
        type: 'pie',
        radius: ['25%', '50%'],
        label: {
          show: true,
          formatter(params: any) {
            if (params.data.name) {
              return `${params.data.name}${params.data.value}%`;
            } else {
              return;
            }
          }
        },
        labelLine: {
          show: true
        },
        data: [
          { value: parseInt(tableData.echartsList[1]['percent']), name: '占比' },
          { value: (100 - parseInt(tableData.echartsList[1]['percent'])), name: '未占比' },
        ]
      }
    ]
  };
  option && myChart.setOption(option);
}
function setEcharts3() {
  var chartDom = document.getElementById('chart3');
  echarts.dispose(chartDom);
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  option = {
    color: ['#4cbc9a', '#dbdbdb'],
    title: {
      text: '数量:' + tableData.echartsList[2]['total'],
      subtext: tableData.echartsList[2].codeName,
      top: '10%',
      left: '5%'
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params: any) {
        if (params.data.name) {
          return `${params.data.name}${params.data.value}%`;
        } else {
          return;
        }
      }
    },
    legend: {
      top: '15%',
      right: 'right'
    },
    series: [
      {
        type: 'pie',
        radius: ['25%', '50%'],
        label: {
          show: true,
          formatter(params: any) {
            if (params.data.name) {
              return `${params.data.name}${params.data.value}%`;
            } else {
              return;
            }
          }
        },
        labelLine: {
          show: true
        },
        data: [
          { value: parseInt(tableData.echartsList[2]['percent']), name: '占比' },
          { value: (100 - parseInt(tableData.echartsList[2]['percent'])), name: '未占比' },
        ]
      }
    ]
  };
  option && myChart.setOption(option);
}
function setEcharts4() {
  var chartDom = document.getElementById('chart4');
  echarts.dispose(chartDom);
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  option = {
    color: ['#a5d63f', '#dbdbdb'],
    title: {
      text: '数量:' + tableData.echartsList[3]['total'],
      subtext: tableData.echartsList[3].codeName,
      top: '10%',
      left: '5%'
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params: any) {
        if (params.data.name) {
          return `${params.data.name}${params.data.value}%`;
        } else {
          return;
        }
      }
    },
    legend: {
      top: '15%',
      right: 'right'
    },
    series: [
      {
        type: 'pie',
        radius: ['25%', '50%'],
        label: {
          show: true,
          formatter(params: any) {
            if (params.data.name) {
              return `${params.data.name}${params.data.value}%`;
            } else {
              return;
            }
          }
        },
        labelLine: {
          show: true
        },
        data: [
          { value: parseInt(tableData.echartsList[3]['percent']), name: '占比' },
          { value: (100 - parseInt(tableData.echartsList[3]['percent'])), name: '未占比' },
        ]
      }
    ]
  };
  option && myChart.setOption(option);
}
function setEchartsConfig(e: any) {

}
function getLoad() {

  if (!queryParams.value.codeValue) {
    message.info("请选择分类");
    return
  }
  if (!echartsStatus.status1) echartsStatus.status1 = true;
  if (queryParams.value.startTimeAndEndTime != null && queryParams.value.startTimeAndEndTime.length > 0) {
    queryParams.value.startTime = queryParams.value.startTimeAndEndTime[0] + ' 00:00:00';
    queryParams.value.endTime = queryParams.value.startTimeAndEndTime[1] + ' 23:59:59';
  } else {
    queryParams.value.startTime = "";
    queryParams.value.endTime = "";
  }
  tableData.loading = true;
  getList({ ...queryParams.value }).then((res: any) => {
    tableData.dataSource = res.page.records;
    tableData.total = res.page.total;
    tableData.loading = false;
    tableData.echartsList = res.list;
    setEchartsList();
  })
}
function reset() {
  queryParams.value = {
    pageNumber: 1,
    pageSize: 10,
    startTimeAndEndTime: [],
    endTime: "",
    startTime: '',
    codeValue: null
  }
  echartsStatus.status1 = false;
}
function getOptionsList() {
  getQueryAll({ codeType: 'reportType' }).then((res: any) => {
    typeOptions.options1 = res;
  });
  getQueryAll({ codeType: 'state' }).then((res: any) => {
    typeOptions.options2 = res;
  });
}
function currentChange(pageNumber: number, pageSize: number) {
  queryParams.value.pageNumber = pageNumber;
  queryParams.value.pageSize = pageSize;
  getLoad();
}
getOptionsList();
</script>
<style lang='less' scoped>
.row-a1 {
  .echarts-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .echarts-li {
      width: 22%;
      height: 200px;
    }
  }
}
</style>
